import {createApp} from 'vue'
import App from './App.vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/dark/css-vars.css'
import './assets/styles/global.scss'
// import './assets/styles/layout.scss'
import './assets/styles/layout-style.scss'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import '@/permission' // permission control
import CKEditor from '@ckeditor/ckeditor5-vue';

import router from './router'
import store from './store'
import api from "@/utils/api";
import * as filter from '@/filters'
import * as shopkeeper from '@/utils/shopkeeper'

const app = createApp(App);
app.use(ElementPlus)
    .use(store)
    .use(router)
    .use(CKEditor)
    .mount('#app');


app.config.globalProperties.$filter = filter;
app.config.globalProperties.$shopkeeper = shopkeeper;
app.config.globalProperties.$api = api;
app.config.globalProperties.$upload = (data, field) => {
    store.dispatch('upload/show', (files) => {
        data[field] = files[0].src
    })
}



router.afterEach((guard) => {
    store.commit('SET_ROUTE_MATCHED', guard.matched)
    console.log('路由变动', guard)
})


for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

store.dispatch('setWindowSize', {width: window.innerWidth, height: window.innerHeight})

window.addEventListener('resize', () => {
    console.log('窗口尺寸发生变动 addEventListener')
    store.dispatch('setWindowSize', {width: window.innerWidth, height: window.innerHeight})
})

